<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
   function jsonp(url) {
        // 这里返回的是一个promise对象
        return new Promise(function (resolve, reject) {
          try {
            // 获取成功了 就resovle 失败就reject
            // 利用jsonp的原理- 利用了script的src属性不会受到同源策略影响
            let script = document.createElement("script") // 动态创建一个标签
            // 随机生成一个方法名
            const callbackName = `callBack${Date.now()}`
            // 此时callBackName是一个变量
            window[callbackName] = function (data) {
              resolve(data) // 此时此刻resolve了 表示已经完成了历史任务
              // 删除创建的标签
              delete window[callbackName] // 销毁创建的方法 防止占用内存
              document.body.removeChild(script) // 删除创建的标签
            }

            script.src = url + `?callback=${callbackName}` // 此时赋值url地址
            // 要将script标签添加到页面
            document.body.append(script)
          } catch (error) {
            reject(error) // 只要出现问题 就reject就可以了
          }
        })
      }
        jsonp("http://www.liulongbin.top:3009/api/jsonp").then((result) => {
          // 必须得resolve
          console.log("通过jsonp拿到了数据", result)
        })
  </script>
</body>
</html>